// 引入选择器
import { Select } from 'antd';
import React, { useState, useEffect } from 'react'
// 导入请求接口
import { getChannels } from 'api/channels';


export default function Channels({ value, onChange }) {

    // 定义频道列表
    const [channels, setchannels] = useState([])
    // 定义封装请求函数
    const getChannelsFn = async () => {
        const res = await getChannels()
        // 修改值
        await setchannels(res.data.channels)
        // console.log(res.data);
    }

    // 挂载发起请求
    useEffect(() => {
        // console.log('21', channels);
        // 频道列表
        getChannelsFn()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
        <>
            <Select placeholder="请选择文章频道" style={{ width: 150 }} allowClear value={value} onChange={onChange}>
                {channels.map((item) => (<Select.Option value={item.name} key={item.id}>{item.name}</Select.Option>)
                )}
            </Select>
        </>
    )
}